<template>
  <div class="list">
    <!--origin-picture
      v-for="(image, index) in images"
      :mini="image.origin"
      :origin="image.origin"
      :width="image.width"
      :height="image.height"
      :key="index"
    />
    <div
      v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
      class="placeholder"
      :key="'p-' + i"
    ></div-->
    <div class="line" v-for="(l, index) in line" :key="`l-${index}`">
      <img v-for="(img, i) in l" :src="img.origin" :key="`img-${index}-${i}`" />
    </div>
  </div>
</template>
<script>
// import OriginPicture from '@/components/Picture'
import _ from 'lodash'
import randomColorRGB from 'random-color-rgb'
export default {
  components: {
    // OriginPicture,
  },
  data() {
    return {
      mini:
        'https://zhitiantu.cdn.bcebos.com/1.jpg?x-bce-process=image/resize,limit_0,m_lfit,h_30/format,f_webp',
      origin: 'https://zhitiantu.cdn.bcebos.com/1.jpg',
      images: [],
      miniHeight: 240,
      maxHeight: 360,
      defaultNum: 5,
      windowWidth: 1440,
      line: [],
    }
  },
  watch: {
    line(newLine) {
      console.log(newLine)
    },
  },
  mounted() {
    const images = []
    for (let i = 1; i <= 50; i++) {
      const image = this.createImage(i)
      images.push(image)
    }
    this.createLine(images)
    /*
    const int = setInterval(() => {
      const images = []
      for (let i = 1; i <= 10; i++) {
        const image = this.createImage(i)
        images.push(image)
      }
      this.createLine(images)
      if (this.line.length > 10) {
        clearInterval(int)
      }
    }, 1000)

     */
  },
  methods: {
    createLine(images) {
      console.log(images.length)
      if (images.length <= 0) return
      const line = []
      let lineWidth = 0
      for (let index = 0; index < images.length; index++) {
        const img = images[index]
        lineWidth += this.miniHeight * (img.width / img.height)
        line.push(img)
        if (lineWidth > this.windowWidth - 50) {
          this.line.push(line)
          console.log('index---', index)
          this.createLine(
            _.filter(images, function(n, i) {
              return i > index
            })
          )
          break
        }
      }
    },
    createImage(i) {
      const width = Math.floor(Math.random() * 900) + 100
      const height = Math.floor(Math.random() * 900) + 100
      return {
        origin: `http://180.76.121.158:8001/${width}/${height}/?bg=${this.createColor()}&font-color=ffffff&text=${i}.${width}x${height}&font-family=001`,
        width,
        height,
      }
    },
    createColor() {
      return randomColorRGB({ min: 20 })
        .replace('rgb(', '')
        .replace(')', '')
    },
  },
}
</script>
<style lang="scss" scoped>
.fav-list {
  display: flex;
  flex-wrap: wrap;
  margin: 2px;
  .placeholder {
    flex-grow: 100;
    flex-basis: 240px;
    height: 0;
    margin: 0;
  }
}
.line {
  display: flex;
  flex-direction: row;
  height: 240px;
  overflow: hidden;
  max-height: 240px;
  img {
    object-fit: cover;
    max-height: 240px;
    height: 100%;
    width: auto;
    overflow: hidden;
  }
}
</style>
